{% extends "layout.tpl" %}

{% block title %}{% endblock %}

{% block style %}
<link rel="stylesheet" type="text/css" href="/nui/pages/components/placeholder/style/page-min.css"/>
{% endblock %}

{% block nav %}
	{% import 'nav.tpl' as nav %}
	{{nav.active('study')}}
{% endblock %}

{% block subpage %} class="g-html"{% endblock %}

{% block content %}
	<div class="g-main f-fr">
		<div class="mainbox">
			<h1 class="e-pt20 e-pb20 f-fs28">输入框占位符</h1>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10">先睹为快</h2>
			<div class="e-mt15">
				<input type="text" class="ui-input" id="demo" placeholder="请输入...">
			</div>
<script type="text/highlight" data-xml-options>
&lt;input type="text" class="ui-input" id="demo" placeholder="请输入..."&gt;
</script>
<script type="text/highlight" data-javascript-options>
Nui.define(['placeholder'], function(placeholder){
	$('#demo').placeholder({
		color:'#f00',
		animate:true
	})

	//或

	placeholder({
		target:'#demo',
		color:'#f00',
		animate:true
	})
})
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10">选项参数</h2>
			{% include "../html/pages/components/placeholder/options.html" %}

			<h2 class="e-pt20 f-fs22 f-bb e-pb10">实例属性</h2>
			{% include "../html/pages/components/placeholder/instance_attr.html" %}

			<h2 class="e-pt20 f-fs22 f-bb e-pb10">实例方法</h2>
			{% include "../html/pages/components/placeholder/instance_method.html" %}

			<h2 class="e-pt20 f-fs22 f-bb e-pb10">类方法</h2>
			{% include "../html/pages/components/placeholder/method.html" %}
		</div>	
	</div>
	{% import 'sidecol.tpl' as side %}
	{{side.active('cpns', 'placeholder')}}
{% endblock %}

{% block script %}
Nui.load('./script/page-min')
{% endblock %}